import React, {useEffect, useState} from 'react';
import {Space, Switch, Table, Button, Form, Input, Select} from "antd";
import {getHospitalList, getHospitalUpdateStatus} from "@/api/hosp";
import {useNavigate} from "react-router-dom";
import {getFindByParentId} from "@/api/dict";
const {Item} = Form;
// const {Option} = Select;
function Index() {
    // 定义保存医院列表的数据状态
    const [hospitalList,setHospitalList] = useState([]);
    // 定义保存页码信息的数据状态
    const [pageInfo,setPageInfo] = useState({
        current:1,
        pageSize:1,
        total:1
    })
    // 保存医院类别列表状态
    const [hostypeList,setHostypeList] = useState([]);
    // 保存省份列表
    const [provinceCodeList,setProvinceCodeList] = useState([]);
    // 保存市列表
    const [cityCodeList,setCityCodeList] = useState([]);
    // 保存区列表
    const [districtCodeList,setDistrictCodeList] = useState([]);
    const [form] = Form.useForm();
    // 加载中
    const [loading,setLoading] = useState(false);
    const navigate = useNavigate();
    const getHospitalListAsync = async function(current:number=1,pageSize:number=4){
        setLoading(true);
        const {data} = await getHospitalList(current,pageSize,form.getFieldsValue());
        setHospitalList(data.content);
        setPageInfo({
            current:data.number+1,
            pageSize:data.size,
            total:data.totalElements
        })
        setLoading(false);


        // getHospitalList(1,4).then((values:any)=>{
        //     setHospitalList(values.data.content);
        //     setPageInfo({
        //         current:values.data.number+1,
        //         pageSize:values.data.size,
        //         total:values.data.totalElements
        //     })
        // })
    }
    useEffect(()=>{
        getHospitalListAsync();
        // 获取医院等级列表
        getFindByParentId(10000).then(value=>{
            // console.log(value);
            setHostypeList(value.data);
        })
        // 获取省份列表
        getFindByParentId(86).then(value=>{
            // console.log(value.data);
            setProvinceCodeList(value.data);
        })
    },[])


    return (
        <div id={"content"}>
            <div style={{marginBottom:"16px"}}>
                <Form layout={"inline"} form={form} autoComplete={"off"}>
                    <Item  name={"provinceCode"}>
                        <Select onChange={async (value)=>{
                             const result = await getFindByParentId(value);
                            // console.log(result.data);
                            form.setFieldsValue({
                                cityCode:undefined,
                                districtCode:undefined
                            })
                            setDistrictCodeList([]);
                            setCityCodeList(result.data);
                        }} placeholder={"请选择省"}>
                            {
                                provinceCodeList.map((item:any)=>(
                                    <Select.Option key={item.id} value={item.value}>{item.name}</Select.Option>
                                ))
                            }
                        </Select>
                    </Item>

                    <Item name={"cityCode"}>
                        <Select onChange={async (value)=>{
                            const result = await getFindByParentId(value);
                            form.setFieldsValue({
                                districtCode:undefined
                            })
                            setDistrictCodeList(result.data);
                        }} placeholder={"请选择市"}>
                            {
                                cityCodeList.map((item:any)=>(
                                    <Select.Option key={item.id} value={item.value}>{item.name}</Select.Option>
                                ))
                            }
                        </Select>
                    </Item>

                    <Item name={"districtCode"}>
                        <Select onChange={()=>{
                            getHospitalListAsync()
                        }} placeholder={"请选择区"}>
                            {
                                districtCodeList.map((item:any)=>(
                                    <Select.Option key={item.id} value={item.value}>{item.name}</Select.Option>
                                ))
                            }
                        </Select>
                    </Item>

                    <Item name={"hosname"}>
                        <Input placeholder={"请输入医院名称"} />
                    </Item>
                    <Item name={"hoscode"}>
                        <Input placeholder={"请输入医院编号"} />
                    </Item>
                    <Item name={"hostype"}>
                        <Select placeholder={"医院类型"}>
                            {
                                hostypeList.map((item:any)=>(
                                    <Select.Option key={item.id} value={item.value}>{item.name}</Select.Option>
                                ))
                            }

                        </Select>
                    </Item>
                    <Item name={"status"}>
                        <Select placeholder={"是否上线"}>
                            <Select.Option value={"1"}>已上线</Select.Option>
                            <Select.Option value={"0"}>未上线</Select.Option>
                        </Select>
                    </Item>
                    <Item>
                        <Button onClick={e=>{
                            getHospitalListAsync()
                        }}>搜索</Button>
                    </Item>
                    <Item>
                        <Button onClick={e=>{
                            form.resetFields();
                            getHospitalListAsync()
                        }}>重置</Button>
                    </Item>
                </Form>
            </div>
            <Table
                loading={loading}
                pagination={{
                    ...pageInfo,
                    // onChange(current,pageSize){
                    //     // console.log(current,pageSize);
                    //     getHospitalListAsync(current,pageSize);
                    // },
                    // 以上代码同以上代码作用相同
                    onChange:getHospitalListAsync

                }}
                scroll={{x:1500}}
                rowKey={"id"}
                bordered={true}
                columns={[
                    {
                        title:"序号",
                        align:"center",
                        render(value,rows,index){
                            return (pageInfo.current-1)*pageInfo.pageSize+index+1;
                        }
                    },{
                        title:"医院名称",
                        align:"center",
                        dataIndex:"hosname"
                    },{
                        title:"医院编号",
                        align:"center",
                        dataIndex:"hoscode"
                    },{
                       title:"医院LOGO",
                       align:"center",
                       dataIndex:"logoData",
                        render(logoData){
                           return (
                               <img height={50} src={"data:image/png;base64,"+logoData} alt=""/>
                           )
                        }
                    },{
                        title:"是否上线",
                        align:"center",
                        dataIndex:"status",
                        // （0：未上线 1：已上线）
                        render(status,rows:any){
                            return (
                                <Switch onChange={async ()=>{
                                    await getHospitalUpdateStatus(rows.id,status===0?1:0);
                                    await getHospitalListAsync(pageInfo.current);
                                }} checked={status===1}/>
                            )
                        }
                    },{
                        title:"医院等级",
                        align:"center",
                        dataIndex:"param",
                        render(param){
                            return param.hostypeString;
                        }
                    },{
                        title:"医院地址",
                        align:"center",
                        dataIndex:"param",
                        render(param){
                            return param.fullAddress;
                        }
                    },{
                        title:"创建时间",
                        align:"center",
                        dataIndex:"createTime"
                    },{
                        title:"操作",
                        align:"center",
                        fixed:"right",
                        dataIndex:"id",
                        render(id,rows:any){
                            return (
                                <Space>
                                    <Button onClick={()=>navigate("/hospital/show/"+id)} type={"primary"}>查看</Button>
                                    <Button type={"primary"} onClick={()=>navigate("/hospital/department/"+rows.hoscode)}>排班</Button>
                                </Space>
                            )
                        }
                    }
                ]}
                dataSource={hospitalList}
            />
        </div>
    );
}

export default Index;